<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" destroyOnClose showFooter title="机场设置" :width="drawerWith" @ok="handleSubmit">
    <div>
      <a-form :model="formState" ref="employeeAirport">
        <a-form-item name="airportIds">
          <a-transfer :dataSource="airportListData" v-model="formState.airportIds" :listStyle="{ width: '45%', height: '880px' }" :titles="[' 可选机场', ' 已选机场']" :render="item => item.title" :target-keys="formState.airportIds" @change="handleTransferChange" filterable show-search></a-transfer>
        </a-form-item>
      </a-form>
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { reactive, ref, unref } from 'vue';
import { BasicDrawer, useDrawerInner } from '@apps/antd-admin/src/components/drawer';
import { airportList } from '@apps/ant-bus/src/views/business/airport/data/api';
import { querySetAirport, setAirport } from '../data/api';
import { useAppInject } from '@apps/antd-admin/src/hooks/web/use-app-inject';
const { getIsMobile } = useAppInject();
const drawerWith = ref('40%');
if (unref(getIsMobile)) {
  drawerWith.value = '80%';
}

const emit = defineEmits(['register', 'success']);
const employeeAirport = ref();
const airportListData = ref();
const formState = reactive({
  airportIds: [],
});
let employeeId = ref();
//表单赋值
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async data => {
  employeeId = data.record.employeeId;
  console.info('employeeId', employeeId);
  let airportIds = await querySetAirport({
    employeeId: employeeId,
  });
  airportList().then(data => {
    data.map(item => {
      item.key = item.airportId;
      item.title = item.airportName;
    });
    airportListData.value = data;
    formState.airportIds = airportIds;
  });
});

/**
 * 穿梭框change
 * @param targetKeys
 * @param direction
 * @param moveKeys
 */
function handleTransferChange(targetKeys, direction, moveKeys) {
  formState.airportIds = targetKeys;
  console.info(formState.airportIds.join(','));
}

/**
 * 表单提交
 */
async function handleSubmit() {
  employeeAirport.value.validate().then(() => {
    setAirport({
      employeeId: employeeId,
      airportIds: formState.airportIds.join(','),
    });
  });
  closeDrawer();
}
</script>
